<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 注意: 先引入 react基础库,再引入react dom解析库 -->
  <script src="lib/react/react.development.js"></script>
  <script src="lib/react/react-dom.development.js"></script>
  <script src="lib/babel.min.js"></script>
</head>
<body>
  <!-- 创建react解析的容器 -->
  <div id="root"></div>
  <script type="text/babel">
    // 发现两个组件基本上是一样的,只有属性不同
    class Salary extends React.Component {
      constructor(props){
        super(props);
        // 共享的状态从父组件获取
        // this.state = {
        //   salary : '0'
        // }
        // bind
        this.handleChange = this.handleChange.bind(this);
      }
      handleChange(e){
        //更新state
        // this.setState({
        //   salary: e.target.value
        // })
        // 通过回调 修改数据源的salary
        this.props.onChange(e.target.value);
      }
      render(){
        return (
          <div>
            <fieldset>
              <legend>薪资/{this.props.title}</legend>
              <input type="text" value={this.props.cValue||''} onChange={this.handleChange}/> {this.props.icon}
            </fieldset> 
          </div>
        )
      }
    }
    
    class HelloWorld extends React.Component {
      constructor(props){
        super(props);
        // 提升两个子组件的共享状态 salary
        this.state = {
          type: 'CNY', // CNY 人民币;  USD  美元
          salary: ''
        }
        this.handleChangeValue = this.handleChangeValue.bind(this);
        this.reverse = this.reverse.bind(this);
        this.handleCNYChangeValue = this.handleCNYChangeValue.bind(this);
        this.handleUSDChangeValue = this.handleUSDChangeValue.bind(this);
        this.areUOk = this.areUOk.bind(this);
      }
      // 检测state的变化
      componentDidUpdate(){
        console.log(this.state);
      }
      // 用于修改当前组件的state.salary
      handleChangeValue(salary){
        // 假设只考虑CNY 
        this.setState({
          salary
        })
      }
      handleCNYChangeValue(salary){
        // 假设只考虑CNY 
        this.setState({
          type: 'CNY',
          salary
        })
      }
      handleUSDChangeValue(salary){
        // 假设只考虑CNY 
        this.setState({
          type: 'USD',
          salary
        })
      }
      // 人民币和美元相互转换的方法
      reverse(type,salary){
        var salaryValue = parseFloat(salary);
        if(Number.isNaN(salaryValue)){
          return '';
        }
        // 假设转换率为 6.65
        const C = 6.65;
        var outputValue;
        // 希望把人民币转换位美元
        if(type == 'USD'){
          outputValue = salaryValue / C;
        }else{
          outputValue = salaryValue*C;
        }
        // 保留两位小数
        // 13.33333333...4 => 为了处理摄入误差,可以先放大100倍,再缩小100倍
        // round四舍五入    13.3333 => 1333.33 => 1333 => 13.33
        outputValue =  Math.round(outputValue*100)/100;   
        //保留两位小数: 13.33   15.1  15 => 13.33 15.10 15.00
        var outputValueStr = outputValue.toString();
        // 没有小数 15 => 15.00
        if(outputValueStr.indexOf('.') == -1){
          outputValueStr += '.00';
        }else{
          // 有小数   15.1  13.33
          var numbers = outputValueStr.split('.');
          // 15.1 => 15.10
          if(numbers[1].length == 1){
            outputValueStr += '0';
          }
        }
        return outputValue+'';
      }
      // 判断是否是有钱人,大于1000人民币即可
      areUOk(){
        if(this.state.type == 'CNY'){
          return parseFloat(this.state.salary) > 1000;
        }else{
          // 美元转换成人民币
          return this.reverse('CNY',this.state.salary)> 1000;
        }
      }
      render(){
        // 注意: 两个input都能输入内容,所以CNY_value和USD_value都应该根据类型进行换算
        // 如果是USD的输入框变化了,那么state.type='USD',并且换算CNY_value;反之亦然...
        var type = this.state.type;
        var salary = this.state.salary;
        // 如果是CNY的输入框变化了,直接使用salary,否则需要转换
        var CNY_value = type=='CNY'? this.state.salary: this.reverse('CNY',salary); 
        var USD_value = type=='USD'? this.state.salary: this.reverse('USD',salary);
        return (
          <div>
              <Salary title="人民币" cValue={CNY_value} onChange={this.handleCNYChangeValue}  icon="￥"/>
              <Salary title="美元" cValue={USD_value} onChange={this.handleUSDChangeValue} icon="$"/>
             {/* // 是否大于1000人民币判断是否是有钱人*/} 
              <p>{this.areUOk()? '您的收入真高啊!': '你需要继续努力哦!'}</p>
          </div>
        )
      }
    }
    // 使用react 相关api 渲染到容器
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));
  </script>
</body>
</html>